<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Turf.js 后端服务演示</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>
    <style>
        body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
        #container { display: flex; height: 100vh; }
        #menu { width: 350px; padding: 20px; overflow-y: auto; background-color: #f0f0f0; }
        #map { flex: 1; }
        .api-btn { 
            display: block; 
            margin: 10px 0; 
            padding: 10px; 
            background-color: #2196F3; 
            color: white; 
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            text-align: left;
            font-size: 14px;
        }
        .api-btn:hover { background-color: #0b7dda; }
        .form-group {
            margin: 10px 0;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            font-size: 14px;
        }
        input, select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .submit-btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .submit-btn:hover {
            background-color: #45a049;
        }
        h1 { margin-top: 0; font-size: 1.5em; }
        h2 { font-size: 1.2em; margin-top: 20px; }
        .description { font-size: 14px; margin-bottom: 15px; }
        #response {
            margin-top: 20px;
            padding: 15px;
            background-color: #e0e0e0;
            border-radius: 5px;
            font-family: monospace;
            white-space: pre-wrap;
            max-height: 200px;
            overflow-y: auto;
            font-size: 12px;
        }
        .active-panel {
            display: block;
        }
        .hidden-panel {
            display: none;
        }
        .back-btn {
            background-color: #607D8B;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 15px;
            font-size: 14px;
        }
        .info-box {
            background-color: #e3f2fd;
            border-left: 4px solid #2196F3;
            padding: 10px;
            margin: 10px 0;
            font-size: 14px;
            border-radius: 0 4px 4px 0;
        }
        .status {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: bold;
            display: inline-block;
            margin-left: 10px;
        }
        .status.online { background-color: #c8e6c9; color: #2e7d32; }
        .status.offline { background-color: #ffcdd2; color: #c62828; }
    </style>
</head>
<body>
    <div id="container">
        <div id="menu">
            <h1>Turf.js 后端服务演示 <span id="server-status" class="status offline">离线</span></h1>
            <p class="description">这个页面演示了如何将 Turf.js 用于后端服务</p>
            
            <div class="info-box">
                本演示需要启动 Node.js 后端服务。<br>
                使用命令: <code>npm install && npm start</code>
            </div>
            
            <!-- 主菜单 -->
            <div id="main-menu">
                <h2>空间分析 API</h2>
                <button class="api-btn" data-panel="distance-panel">距离计算 API</button>
                <button class="api-btn" data-panel="point-in-polygon-panel">点在多边形内判断 API</button>
                <button class="api-btn" data-panel="buffer-panel">缓冲区生成 API</button>
                <button class="api-btn" data-panel="nearest-panel">最近点查找 API</button>
                <button class="api-btn" data-panel="simplify-panel">线简化 API</button>
                <button class="api-btn" data-panel="cluster-panel">数据聚类 API</button>
                <button class="api-btn" data-panel="union-panel">多边形合并 API</button>
            </div>
            
            <!-- 距离计算面板 -->
            <div id="distance-panel" class="hidden-panel">
                <button class="back-btn">&larr; 返回</button>
                <h2>距离计算 API</h2>
                <p class="description">计算两点之间的距离，常用于路线规划和附近设施查找</p>
                
                <form id="distance-form">
                    <div class="form-group">
                        <label>起点经度:</label>
                        <input type="number" step="0.0001" id="point1-lng" value="116.3912" required>
                    </div>
                    <div class="form-group">
                        <label>起点纬度:</label>
                        <input type="number" step="0.0001" id="point1-lat" value="39.9055" required>
                    </div>
                    <div class="form-group">
                        <label>终点经度:</label>
                        <input type="number" step="0.0001" id="point2-lng" value="116.4278" required>
                    </div>
                    <div class="form-group">
                        <label>终点纬度:</label>
                        <input type="number" step="0.0001" id="point2-lat" value="39.9047" required>
                    </div>
                    <div class="form-group">
                        <label>单位:</label>
                        <select id="distance-units">
                            <option value="kilometers">公里 (kilometers)</option>
                            <option value="miles">英里 (miles)</option>
                            <option value="meters">米 (meters)</option>
                        </select>
                    </div>
                    <button type="submit" class="submit-btn">计算距离</button>
                </form>
                
                <div id="response"></div>
            </div>
            
            <!-- 点在多边形内判断面板 -->
            <div id="point-in-polygon-panel" class="hidden-panel">
                <button class="back-btn">&larr; 返回</button>
                <h2>点在多边形内判断 API</h2>
                <p class="description">判断点是否在多边形内，用于地理围栏和区域内资源查询</p>
                
                <form id="point-in-polygon-form">
                    <div class="form-group">
                        <label>点经度:</label>
                        <input type="number" step="0.0001" id="point-lng" value="116.3950" required>
                    </div>
                    <div class="form-group">
                        <label>点纬度:</label>
                        <input type="number" step="0.0001" id="point-lat" value="39.9100" required>
                    </div>
                    <p>使用地图上绘制的多边形进行判断</p>
                    <button type="submit" class="submit-btn">判断点是否在多边形内</button>
                </form>
                
                <div id="response"></div>
            </div>
            
            <!-- 缓冲区生成面板 -->
            <div id="buffer-panel" class="hidden-panel">
                <button class="back-btn">&larr; 返回</button>
                <h2>缓冲区生成 API</h2>
                <p class="description">为点、线或多边形创建指定半径的缓冲区，用于影响分析和覆盖区域研究</p>
                
                <form id="buffer-form">
                    <div class="form-group">
                        <label>中心点经度:</label>
                        <input type="number" step="0.0001" id="buffer-point-lng" value="116.4027" required>
                    </div>
                    <div class="form-group">
                        <label>中心点纬度:</label>
                        <input type="number" step="0.0001" id="buffer-point-lat" value="39.9087" required>
                    </div>
                    <div class="form-group">
                        <label>缓冲半径:</label>
                        <input type="number" step="0.1" id="buffer-radius" value="1.0" required>
                    </div>
                    <div class="form-group">
                        <label>单位:</label>
                        <select id="buffer-units">
                            <option value="kilometers">公里 (kilometers)</option>
                            <option value="miles">英里 (miles)</option>
                            <option value="meters">米 (meters)</option>
                        </select>
                    </div>
                    <button type="submit" class="submit-btn">生成缓冲区</button>
                </form>
                
                <div id="response"></div>
            </div>
            
            <!-- 最近点查找面板 -->
            <div id="nearest-panel" class="hidden-panel">
                <button class="back-btn">&larr; 返回</button>
                <h2>最近点查找 API</h2>
                <p class="description">查找距离目标点最近的点，常用于寻找最近设施</p>
                
                <form id="nearest-form">
                    <div class="form-group">
                        <label>目标点经度:</label>
                        <input type="number" step="0.0001" id="target-lng" value="116.3912" required>
                    </div>
                    <div class="form-group">
                        <label>目标点纬度:</label>
                        <input type="number" step="0.0001" id="target-lat" value="39.9055" required>
                    </div>
                    <p>使用地图上显示的点来查找最近点</p>
                    <button type="submit" class="submit-btn">查找最近点</button>
                </form>
                
                <div id="response"></div>
            </div>
            
            <!-- 线简化面板 -->
            <div id="simplify-panel" class="hidden-panel">
                <button class="back-btn">&larr; 返回</button>
                <h2>线简化 API</h2>
                <p class="description">简化复杂线条，减少数据量，提高渲染性能</p>
                
                <form id="simplify-form">
                    <div class="form-group">
                        <label>简化容差 (越大简化越多):</label>
                        <input type="number" step="0.001" id="simplify-tolerance" value="0.001" min="0.0001" max="0.01" required>
                    </div>
                    <div class="form-group">
                        <label>高质量简化:</label>
                        <select id="high-quality">
                            <option value="true">是</option>
                            <option value="false">否</option>
                        </select>
                    </div>
                    <p>使用地图上绘制的线进行简化</p>
                    <button type="submit" class="submit-btn">简化线条</button>
                </form>
                
                <div id="response"></div>
            </div>
            
            <!-- 数据聚类面板 -->
            <div id="cluster-panel" class="hidden-panel">
                <button class="back-btn">&larr; 返回</button>
                <h2>数据聚类 API</h2>
                <p class="description">将点数据聚合成簇，用于识别数据分布模式</p>
                
                <form id="cluster-form">
                    <div class="form-group">
                        <label>聚类数量:</label>
                        <input type="number" id="cluster-count" value="3" min="2" max="10" required>
                    </div>
                    <p>使用地图上随机生成的点进行聚类</p>
                    <button type="submit" class="submit-btn">聚类分析</button>
                </form>
                
                <div id="response"></div>
            </div>
            
            <!-- 多边形合并面板 -->
            <div id="union-panel" class="hidden-panel">
                <button class="back-btn">&larr; 返回</button>
                <h2>多边形合并 API</h2>
                <p class="description">将多个多边形合并为一个，常用于区域整合</p>
                
                <form id="union-form">
                    <p>使用地图上绘制的多边形进行合并</p>
                    <button type="submit" class="submit-btn">合并多边形</button>
                </form>
                
                <div id="response"></div>
            </div>
        </div>
        <div id="map"></div>
    </div>

    <script src="backend-demo.js"></script>
</body>
</html>
